home *** CD-ROM | disk | FTP | other *** search
/ Exame Informatica 142 / Exame Informatica 142.iso / Programas / paintnet / PaintDotNet_3_01_BetaNews.exe / PaintDotNetSetup.exe / PaintDotNet.msi / _5CDAC78E9CF491B3CC845F2E5D18BFD4 < prev    next >
Encoding:
Text File  |  2007-01-11  |  8.0 KB  |  186 lines
  1. <html>
  2.  
  3. <!-- #BeginTemplate "pdn_help.dwt" -->
  4.  
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  7. <!-- #BeginEditable "title" -->
  8. <title>Paint.NET Help - Gradient Tool</title>
  9. <!-- #EndEditable -->
  10. <link rel="stylesheet" type="text/css" href="../stylesheet.css">
  11. </head>
  12.  
  13. <body>
  14.  
  15. <div id="banner">
  16.     <a href="http://www.getpaint.net/">
  17.     <img border="0" src="../images/logo.png"></a><p>
  18.      </div>
  19. <div id="leftnav">
  20.     <ul class="toc" style="margin-left: 0; padding-left: 0;">
  21.         <li><a href="index.html">Overview</a><br>
  22.         </li>
  23.         <li><a href="Features.html">Features</a><br>
  24.         <a href="Tutorials.html">Tutorials</a><br>
  25.         <a href="WhatsNew.html">What's New?</a><br>
  26.         </li>
  27.     </ul>
  28.     <h3>Concepts</h3>
  29.     <ul class="toc" style="margin-left: 0; padding-left: 0;">
  30.         <li><a href="LayersAndBlendModes.html">Layers and Blend Modes</a></li>
  31.     </ul>
  32.     <h3>User Interface</h3>
  33.     <ul class="toc" style="margin-left: 0; padding-left: 0;">
  34.         <li><a href="KeyboardMouseCommands.html">Keyboard & Mouse Commands</a></li>
  35.         <li><a href="MainWindow.html">Main Window</a></li>
  36.         <li><a href="ImageList.html">Image List</a></li>
  37.         <li><a href="MenuBar.html">Menu Bar</a>
  38.         <ul class="toc">
  39.             <li><a href="FileMenu.html">File</a></li>
  40.             <li><a href="EditMenu.html">Edit</a></li>
  41.             <li><a href="ViewMenu.html">View</a></li>
  42.             <li><a href="ImageMenu.html">Image</a></li>
  43.             <li><a href="LayersMenu.html">Layers</a>
  44.             <ul class="toc">
  45.                 <li class="comment"><a href="RotateZoom.html">Rotate / Zoom</a></li>
  46.             </ul></li>
  47.             <li><a href="AdjustmentsMenu.html">Adjustments</a> 
  48.                 <ul class="toc">
  49.                     <li><a href="Curves.html">Curves</a></li>
  50.                     <li><a href="Levels.html">Levels</a></li>
  51.                 </ul></li>
  52.             <li><a href="EffectsMenu.html">Effects</a></li>
  53.             <li><a href="WindowMenu.html">Window</a></li>
  54.             <li><a href="HelpMenu.html">Help</a></li>
  55.         </ul>
  56.         </li>
  57.         <li><a href="Toolbar.html">Toolbar</a></li>
  58.         <li><a href="ToolsWindow.html">Tools Window</a><ul class="toc">
  59.             <li><a href="SelectionTools.html">Selection Tools</a></li>
  60.             <li><a href="MoveTools.html">Move Tools</a><br>
  61.             <a href="MagicWand.html">Magic Wand</a></li>
  62.             <li><a href="GradientTool.html">Gradient Tool</a><br>
  63.             <a href="Paintbrush.html">Paintbrush</a></li>
  64.             <li><a href="EraserTool.html">Eraser Tool</a></li>
  65.             <li><a href="PixelTools.html">Pixel Tools</a></li>
  66.             <li><a href="ShapeTools.html">Shape Tools</a></li>
  67.             <li><a href="LineCurve.html">Line / Curve Tool</a></li>
  68.             <li><a href="TextTool.html">Text Tool</a></li>
  69.             <li><a href="PaintBucket.html">Paint Bucket</a></li>
  70.             <li><a href="CloneStamp.html">Clone Stamp</a></li>
  71.             <li><a href="RecolorTool.html">Recolor Tool</a></li>
  72.         </ul>
  73.         </li>
  74.         <li><a href="HistoryWindow.html">History Window</a></li>
  75.         <li><a href="LayersWindow.html">Layers Window</a></li>
  76.         <li><a href="ColorsWindow.html">Colors Window</a></li>
  77.         <li><a href="StatusBar.html">Status Bar</a></li>
  78.     </ul>
  79.     </li>
  80.     <h3>Other</h3>
  81.     <ul class="toc" style="margin-left: 0; padding-left: 0;">
  82.         <li><a href="FAQ.html">FAQ (Frequently Asked Questions)</a></li>
  83.         <li><a href="UnattendedInstallation.html">Unattended Installation</a></li>
  84.         <li><a href="SystemRequirements.html">System Requirements</a></li>
  85.         <li><a href="WebLinks.html">Web Links</a></li>
  86.         <li><a href="License.html">License</a></li>
  87.     </ul>
  88. </div>
  89. <div id="content">
  90.     <!-- #BeginEditable "content" -->
  91.     <h2>Gradient Tool</h2>
  92.     <p>The Gradient Tool allows you to draw gradients in several formats. With 
  93.     its transparency mode, you can also "fade" or "blend" two images together.</p>
  94.     <h3>Gradient Types</h3>
  95.     <p>Each gradient type can be chosen from the <a href="Toolbar.html#Gradient">
  96.     Gradient section of the toolbar</a>:</p>
  97.     <blockquote>
  98.         <p>
  99.         <img border="0" src="Images/Toolbar_GradientTool.png" width="382" height="72"></p>
  100.     </blockquote>
  101.     <p>The first column of gradients below shows how the gradient looks when 
  102.     drawn in Color mode with two opaque colors (alpha value of 255). </p>
  103.     <p>The second column shows the effect of drawing a gradient with the 
  104.     Transparency Mode on the following image:</p>
  105.     <blockquote>
  106.         <p><img border="1" src="../images/Camaro_160.jpg"></p>
  107.     </blockquote>
  108.     <ul>
  109.         <li>Linear<br>
  110.             <img border="1" src="../images/Gradient_Linear.png">
  111.             <img border="1" src="../images/Gradient_Alpha_Linear.jpg"><br>
  112.  </li>
  113.         <li>Linear (Reflected)<br>
  114.         <img border="1" src="../images/Gradient_LinearReflected.png">
  115.         <img border="1" src="../images/Gradient_Alpha_LinearReflected.jpg" width="160" height="100"> <br>
  116.  </li>
  117.         <li>Diamond<br>
  118.         <img border="1" src="../images/Gradient_Diamond.png">
  119.         <img border="1" src="../images/Gradient_Alpha_Diamond.jpg" width="160" height="100"><br>
  120.  </li>
  121.         <li>Radial<br>
  122.         <img border="1" src="../images/Gradient_Radial.png">
  123.         <img border="1" src="../images/Gradient_Alpha_Radial.jpg" width="160" height="100"><br>
  124.  </li>
  125.         <li>Conical<br>
  126.         <img border="1" src="../images/Gradient_Conical.png">
  127.         <img border="1" src="../images/Gradient_Alpha_Conical.jpg" width="160" height="100"></li>
  128.     </ul>
  129.     <h3>Drawing a Gradient</h3>
  130.     <p>To draw a gradient, simply click and drag on the canvas as if you were 
  131.     drawing a line. The gradient will be drawn as you move the mouse which 
  132.     should let you quickly figure out the placement for the gradient you want to 
  133.     draw. After you release the mouse button, you will be able to adjust the 
  134.     gradient control points by moving the circular nubs. Right-clicking on a nub 
  135.     will swap the roles of the primary and secondary colors. If you move a nub 
  136.     while holding both mouse buttons, then both nubs will be moved.</p>
  137.     <h3>Color Mode</h3>
  138.     <p>The default type of gradient is a color gradient that affects all color 
  139.     channels and the alpha channel. The gradient will be drawn such that it 
  140.     fades from the primary color to the secondary color. If you use the right 
  141.     mouse button, then the roles of the primary and secondary colors will be 
  142.     reversed. The gradients in the first column above were drawn using the 
  143.     default colors of black and white.</p>
  144.     <h3>Transparency Mode ("Fading" / "Blending")</h3>
  145.     <p>The special transparency mode can be used to fade out part of an image. 
  146.     This can also be quite useful for blending two images together. To access 
  147.     this mode, click on the button that controls the Gradient mode in the 
  148.     toolbar and select Transparency Mode:</p>
  149.     <blockquote>
  150.         <p><img border="0" src="Images/Toolbar_GradientTool2.png"></p>
  151.     </blockquote>
  152.     <p>This type of gradient will only affect the alpha channel of the current 
  153.     layer. The gradient will fade <i>from</i> the alpha value of the primary 
  154.     color <i>to </i>the inverse of the alpha value of the secondary color. If 
  155.     you use the right mouse button, then the gradient will fade <i>from </i>the 
  156.     inverse of the alpha value of the secondary color <i>to </i>the alpha value 
  157.     of the primary color. To put it more simply, treat transparency gradients as 
  158.     always fading from opaque (255 alpha) to transparent (0 alpha).</p>
  159.     <p>To do a "fade" or "blend", place the two images on separate layers, and 
  160.     then use a transparency gradient on the top layer.</p>
  161.     <p>As an example, using the two-layer discussed in Layers and Blend Modes, 
  162.     the following cross-faded image can be easily created by drawing a 
  163.     transparency gradient from left to right on the layer with the picture of 
  164.     Seattle:</p>
  165.     <blockquote>
  166.         <p><img border="1" src="../images/Gradient_CrossFade.jpg"></p>
  167.     </blockquote>
  168.     <!-- #EndEditable -->
  169.     <h4><br>
  170.     <br>
  171.     </h4>
  172.     <p align="center">
  173.     <font color="#808080" size="1">Copyright <font face="Times New Roman">┬⌐ 2007 </font>
  174.     Rick Brewster, Tom Jackson, and past contributors. Portions Copyright
  175.     <font face="Times New Roman">┬⌐ 2007 </font>Microsoft Corporation. All Rights 
  176.     Reserved.</font><font size="1"> <br>
  177.     </font>
  178. </div>
  179. </b>
  180.  
  181. </body>
  182.  
  183. <!-- #EndTemplate -->
  184.  
  185. </html>
  186.